<!--  frame 平台商品 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>平台商品</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/platform_commodity/platform_commodity.wxss */

/* 头部导航 */

.header1 {
  display: flex;
  align-items: center;

  height: .95rem;
  background-color: #ff502d;
}

.search {
  display: flex;
  align-items: center;
  width: 5rem;
  height: .60rem;
  background-color: #fff;
  border-radius: .30rem;
  margin-left: .30rem;
}

.search_text1 {
  flex: auto;
  border-radius:0.3rem;
  font-size: .26rem;
	height: 0.5rem;
	padding-left: 0.1rem;
  color: #333;
	border: solid #F8F8F8 0px;
	/*background: #000*/
}

.search_icon {
  height: .38rem;
  width: .38rem;
  line-height: .38rem;
  font-size: .38rem;
  color: #aaa;
  margin: 0 .20rem;
}

.city {
  font-size: .30rem;
	width: 1.7rem;
  color: #fff;
  margin-left: .16rem;
	display: flex;
	justify-content: center;
}

.jiantou {
  width: .26rem;
  height: .28rem;
  margin-left: .10rem;
  margin-top: .10rem;
}

/* 菜单 */

.nav {
  display: flex;
  overflow-x:auto;
  height: .80rem;
  line-height: .80rem;
  white-space:nowrap;
  background-color: #ff502d;
}
.nav::-webkit-scrollbar {
	display: none;
}

.nav_item {
  position: relative;
  height: .80rem;
  font-size: .30rem;
  margin: 0 .20rem;
  color: rgba(255, 255, 255, 0.5);
}

.active {
  color: rgba(255, 255, 255, 1);
}

.xiahuaxian {
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: 0;
  height: .04rem;
  border-radius: .02rem;
  background: #fff;
}

/* 商品 */

.section {
  width: 6.90rem;
  margin: 0 auto;
}

.scroll-div {
  width: 100%;
}

.goodsItem {
  width: 6.90rem;
  margin-bottom: .20rem;
}

.goodsType {
  height: .30rem;
  line-height: .30rem;
  font-size: .30rem;
  color: #333;
  margin: .40rem 0;
  text-align: center;
}

.goods_box {
  padding-top: .30rem;
  background: #fff;
  /* text-align: center; */
  font-size: 0;
  border-radius:.10rem;
}

.goods_list {
  width: 3.20rem;
  display: inline-block;
  padding: 0 .12rem;
  margin-bottom: .40rem;
}

.goods_img {
  height: 3.20rem;
  width: 3.20rem;
  border-radius: .10rem;
}

.goods_title {
  height: .28rem;
  line-height: .28rem;
  font-size: .28rem;
  color: #333;
  text-align: left;
  margin-top: .26rem;
  padding-left: .16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency_box {
	display: flex;
  font-size: .28rem;
  color: #999;
  text-align: left;
  margin-top: .10rem;
  padding-left: .16rem;
}

.agency_price {
  font-size: .32rem;
  color: #ff502d;
}

.sell_box {
	display: flex;
  font-size: .28rem;
  color: #999;
  text-align: left;
  margin-top: .10rem;
  padding-left: .16rem;
}

.sell_price {
  color: #ff502d;
}

.picker-row{
	display: flex;

}

.top{
	position:fixed;
	top:0;
	width: 100%;
}
.null{
	color: #999;
	font-size: .32rem;
	margin-top: 3.00rem;
	display: flex;
	justify-content: center;
}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<!-- 头部导航 -->
		<div class="top">
			<div class="header1">
				<div class="search">
					<div class="iconfont iconsousuo search_icon"></div>
					<!-- <div class="search_text"></div> -->
					<input class="search_text1"  confirm-type="search" @keyup.13="sousuo" type="search" @input="bindinput" v-model="text" @confirm="sousuo"
						placeholder="输入相关商品名称来进行搜索" />
				</div>
				<!-- <div class="city">上海</div> -->
				<div class="picker-row" @click="bindPickerChange" value="{{Cityindex}}" range="{{Citysrt}}">
					<div class="city">
						{{Citysrt[Cityindex]}}
						<image class="jiantou" src="../image/down.png"></image>
					</div>
				</div>

			</div>

			<!-- 菜单导航 -->
			<div class="nav" v-if="text.length == 0">
				<div v-for="(item,index) in loadType" :key="index" class="nav_item" @click="clickNav(index)">
					<div :class="num==index?'active nav_title':'nav_title'">{{item.type_desc}}</div>
					<div :class="num==index?'xiahuaxian':''"></div>
				</div>
			</div>
		</div>

		<div style="height: 1.75rem;"></div>
		<div class="section" v-if="productList.length != 0">
			<div class="scroll-div" scroll-y="true" style="height:{{height}}">
				<div class="goodsItem" v-for="(item,index) in productList" :key="index">
					<div class="goodsType">{{item.type_name}}</div>
					<div class="goods_box">
						<div class="goods_list" bindtap="goodsDetail" v-for="(goods,index) in item.products" :key="index"
							v-for-item="goods">
							<image class="goods_img"  :src="goods.image_center +'?imagediv2/1/w/160/h/160'"></image>
							<div class="goods_title">{{goods.product_name}}</div>
							<div class="agency_box">
								<div class="agency_title">代理价：</div>
								<div class="agency_price">¥{{goods.agentPrice}}</div>
							</div>
							<div class="sell_box">
								<div class="sell_title">售价：</div>
								<div class="sell_price">¥{{goods.price}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="isbz && productList.length == 0" class="no-data">
			<img src="../image/notice.png" alt="">
			<div class="">暂无数据</div>
		</div>
	</div>


</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			num: 0,
	    height:'',
	    productList:[],
			datas:[],
			text:'',//输入框
			loadType:[],//平台分类
			CityList:[],//城市
			Citysrt:[],//城市名称
			Cityindex:0,
			isbz:false
		},
		mounted: function(){
				this.getagentId()
		},
		methods: {
			// 输入框
			bindinput:function (){
				if(!this.text){
					this.getloadTypeProductAgent(this.loadType[this.num].id,this.CityList[this.Cityindex].id)
				}else{
					// this.sousuo()
				}
			},
			// 搜索
		 sousuo:function (){
			 this.getloadTypeProductAgent(this.loadType[this.num].id,this.CityList[this.Cityindex].id,this.text)
		 },
			// 切换地址
			bindPickerChange(){
				hhPanel.actionSheet({
				    buttons: vm.Citysrt,
				    success: function(ret1,ret2)
				    {
				        // 选择"评论"
				        Console(ret1);      // {"id":"","label":"评论","index":2}
				        Console(ret2);      // 评论
								vm.Cityindex = ret1.index;
						    let index = vm.num;
							  vm.getloadTypeProductAgent(vm.loadType[index].id,vm.CityList[vm.Cityindex].id,vm.text)
				    }
				});
			},
			// 点击菜单
			clickNav: function (index) {
				this.num = index
			  this.getloadTypeProductAgent(this.loadType[index].id,this.CityList[this.Cityindex].id,this.text)
			},
			//获取代理商列表分类
		  getCouponList: function(index) {
				AjaxSafe({
						url:"/xapp/app/product/loadType",
						loader:true,
					success: function(res) {
							if (res.state) {
									vm.loadType= res.data
									vm.getloadTypeProductAgent(vm.loadType[index].id,vm.CityList[vm.Cityindex].id)
							}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
		  },
			//获取代理商数据
		  getloadTypeProductAgent: function(typeId,cityId,name) {
				let param = {
						type_id:typeId ? typeId : '',
						city_id:cityId ? cityId : '',
						name: name ? name : ''
					}
					AjaxSafe({
				   		url:"/xapp/app/product/loadTypeProductAgent",
				    	data:param,
				    	loader:true,
						success: function(ret) {
							if(ret.state){
								vm.productList=ret.data
							}
							vm.isbz = true
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
		  },
			//获取获取所有的代理城市
			getagentCityList: function(id) {
				let param = {
						agent_id:id
				}
				AjaxSafe({
			   		url:"/xapp/agent/agentCityList",
			    	data:param,
			    	loader:true,
					success: function(ret) {
							let Citysrt = []
							for(let i=0;i<ret.length;i++){
								Citysrt.push(ret[i].cityName)
							}
							vm.CityList=ret
							vm.Citysrt=Citysrt
							vm.getCouponList(0)  //获取平台分类
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			//获取代理商id
		  getagentId: function(id) {
				AjaxSafe({
			   		url:"/xapp/user",
			    	loader:true,
					success: function(ret) {
					    vm.getagentCityList(ret.agent.id)
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
		  },
			//获取代理商数据  搜索
		  sousuoloadTypeProductAgent: function(name,cityId) {
				let param = {
					name:name ? name : '',
					city_id:cityId ? cityId : ''
				}
				AjaxSafe({
			   		url:"/xapp/app/product/loadTypeProductAgent",
			    	data:param,
			    	loader:loader,
					success: function(res) {
						if(res.state){
								vm.productList = res.data
						}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
		  },






		},

	});
}

</script>
</html>
